<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>

        <el-input
          v-model="listQuery.key_word"
          placeholder="关键字"
          style="width: 200px;"
          class="filter-item"
        />
        <el-button

          class="filter-item"
          type="info"
          size="mini"
          style="width: 60px;"
          @click="getList"
        >搜索
        </el-button>
      </el-row>
    </div>
    <el-table
      empty-text="-"
      v-loading="listLoading"
      :size="table_size"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column type="index" width="50"/>
      <el-table-column v-for="(ctl,index) in table_ctl" :sortable="ctl.sortable" :key="index" :label="ctl.label" :prop="ctl.prop" v-if="ctl.visiable" align="center"></el-table-column>
      <el-table-column label="操作时间" prop="create_time" align="center" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="scope">
          <div>
            <span style="margin-right: 5px">创建时间</span>
            <el-tooltip class="item" effect="dark" :hide-after="500" content="设置列" placement="top">
              <el-popover
                placement="left"
                title="设置列"
                width="200"
                trigger="click"
                content="设置列">
                <div v-for="(ctl,index) in table_ctl" :key="index" class="margin-top-xs">
                  <el-switch v-model="ctl.visiable" active-text="" inactive-text="" active-color="#13ce66" inactive-color="#666666"></el-switch>
                  <span>{{ctl.label}}</span>
                </div>
                <el-button slot="reference" icon="el-icon-setting" circle type="text"></el-button>
              </el-popover>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :hide-after="500" content="行间距" placement="top">
              <el-popover
                placement="left"
                title="行间距"
                trigger="click"
                content="选择间距">
                <el-radio-group v-model="table_size" size="mini">
                  <el-radio-button label="medium">大</el-radio-button>
                  <el-radio-button label="small">中</el-radio-button>
                  <el-radio-button label="mini">小</el-radio-button>
                </el-radio-group>
                <el-button slot="reference" icon="el-icon-crop" circle type="text"></el-button>
              </el-popover>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="表格列编辑"
      :visible.sync="table_dialog_form_visiable"
      style="width: 100%;"
      custom-class="dialogwidth">
      <el-form
        ref="dataForm"
        label-position="left"
        label-width="200px">
        <div class="lb">
          <el-form-item :label="ctl.label + '：'" v-for="(ctl,index) in table_ctl" :key="index">
            <el-switch v-model="ctl.visiable" active-text="可见" inactive-text="不可见" active-color="#13ce66" inactive-color="#666666"></el-switch>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="table_dialog_form_visiable = false" type='primary'>确定</el-button>
      </div>
    </el-dialog>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :page-sizes="[20,50,99]"
      :page-size="99"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination/index' // secondary package based on el-pagination
  import { getSysLog, addSysLog, editSysLog, removeSysLog } from '@/api/system'
  import Vue from 'vue'

  export default {
    components: { Pagination },
    data() {
      return {
        list: [],
        table_size:'mini',
        total: 0,
        role_list: [],
        listLoading: false,
        form: {},
        dialogFormVisible: false,
        textMap: {
          edit: '编辑',
          create: '添加'
        },

        table_dialog_form_visiable: false,
        table_ctl: [
          // {
          //   label: 'ID',
          //   prop: 'id',
          //   sortable: false,
          //   visiable: true,
          //   formatter: null
          // },
          {
            label: '用户ID',
            prop: 'user_id',
            sortable: false,
            visiable: true,
            formatter: null
          },
          {
            label: '用户名',
            prop: 'username',
            sortable: false,
            visiable: true,
            formatter: null
          },
          {
            label: '用户操作',
            prop: 'operation',
            sortable: false,
            visiable: true,
            formatter: null
          },
          {
            label: '请求方法',
            prop: 'method',
            sortable: false,
            visiable: true,
            formatter: null
          },
          {
            label: '请求参数',
            prop: 'params',
            sortable: false,
            visiable: true,
            formatter: null
          },
          // {
          //   label: '请求IP',
          //   prop: 'ip',
          //   sortable: false,
          //   visiable: true,
          //   formatter: null
          // },
          // {
          //   label: '设备类型',
          //   prop: 'device_type',
          //   sortable: false,
          //   visiable: true,
          //   formatter: null
          // },
          // {
          //   label: '日志类型',
          //   prop: 'log_type',
          //   sortable: false,
          //   visiable: true,
          //   formatter: null
          // },
          // {
          //   label: '异常详情',
          //   prop: 'exception_detail',
          //   sortable: false,
          //   visiable: true,
          //   formatter: null
          // }
        ],
        dialogStatus: '',
        listQuery: {
          page: 1,
          limit: 99,
          start_time: null,
          end_time: null
        }
      }
    },
    created() {
      this.getList()
    },
    mounted() {
    },
    methods: {
      //获取系统日志
      getList() {
        let _this = this
        _this.listLoading = true
        getSysLog(_this.listQuery).then(response => {
          _this.list = response.items
          _this.total = response.totalCount
          _this.listLoading = false
        })
        setTimeout(() => {
          _this.listLoading = false
        }, 3.5 * 1000)
      }
    }
  }
</script>
<style>

</style>
